<template>
<!--brandstreet.wxml-->
<view class="container">
    <navigator class="copyright" url="#" :hidden="!requestData.ad"><image class="wh100" :src="url + '' + requestData.ad.ad_code"></image></navigator> 
    <view>
        <swiper class="swiper_box" indicator-dots="true" vertical="false" autoplay="true" interval="3000" duration="1000">
            <block v-for="(item2, index2) in requestData.hot_list" :key="index2">
            <block v-if="index2 % 3 == 0">
                 <swiper-item>
                 <block v-for="(item, index) in requestData.hot_list" :key="index">
                    <block v-if="index>=index2 && index <=index2 + 2">
                    <navigator class="slide-item" :url="'/pages/goods/goodsInfo/goodsInfo?goods_id=' + item.goods_id">
                        <view class="image-wrap">
                            <image class="wh100" :src="url + '/api/goods/goodsThumImages?goods_id=' + item.goods_id + '&width=200&height=200'"></image>
                        </view>
                        <view class="current-price">￥{{item.shop_price}}</view>
                        <view class="market-price">￥{{item.market_price}}</view>
                    </navigator>
                    </block>
                </block>
                </swiper-item>
            </block>
            </block>
        </swiper>
    </view>
    <view class="recommend">
        <view class="re-title">推荐大牌</view>
        <view class="tab-list">
            <block v-for="(item, index) in requestData.brand_list" :key="index">
                <navigator class="brand-item" :url="'/pages/goods/search/search?brand_id=' + item.id">
                    <image :src="item.logo?url + item.logo:'../../../images/unknow.png'"></image>
                </navigator>
            </block>
        </view>
    </view>
</view>
</template>

<script>
var app = getApp();
import LoadMore from "../../../utils/LoadMore";
var load = new LoadMore();

export default {
  data() {
    return {
      url: app.globalData.setting.url,
      resourceUrl: app.globalData.setting.resourceUrl,
      requestData: null,
      brandCurrentPage: 1
    };
  },

  components: {},
  props: {},
  onLoad: function () {
    load.init(this, 'brand_list', 'requestData');
    this.requestBrandStreet();
  },
  onReachBottom: function () {
    if (load.canloadMore()) {
      this.requestBrandStreet();
    }
  },
  methods: {
    requestBrandStreet: function () {
      var that = this;
      var requestUrl = '/api/index/brand_street' + '?p=' + that.brandCurrentPage;
      load.request(requestUrl, function () {
        that.brandCurrentPage++;
      });
    }
  }
};
</script>
<style>
/* brandstreet.wxss */
.copyright{
    width:100%;
    height: 296rpx;
}
.wh100{
    width: 100%;
    height: 100%;
}
.swiper_box{
    background-color: #fff;
    padding: 20rpx 0;
    height:180px;
}
.slide-item{
    float: left;
    width: 33.33%;
    text-align: center;
    font-size: 24rpx;
}
.current-price{
    color:#ff6a00;
    margin: 10rpx 0;
}
.market-price{
    color: #999;
    text-decoration: line-through;
}
.image-wrap{
    width: 228rpx;
    height: 228rpx;
    margin: 0 auto;
}
.recommend{
    background-color: #fff;
    margin-top: 20rpx;
}
.re-title{
    line-height:64rpx;
    font-size: 32rpx;
    padding-left: 20rpx;
    color: #333;
}
.tab-list{
   border-top: 1px solid #f3f3f3;
}
.brand-item{
    float: left;
    width: 25%;
    height: 120rpx;
    padding-top:7rpx;
    box-sizing: border-box;
    border-bottom: 1px solid #f3f3f3;
    border-right: 1px solid #f3f3f3;
    text-align: center;
}
.brand-item image{
    width: 150rpx;
    height: 106rpx;
}

</style>